<template>
	<div class="waitMatch">
		<right-header :header-name="headerName" :is-show="true" :trans-number="transNumber"></right-header>
		<el-steps :space="200" :active="2" :center="true" :align-center="true" class="steps">
		  	<el-step title="新建候选名单"></el-step>
		  	<el-step title="确认候选者／等待配型"></el-step>
		  	<el-step title="HLA配型"></el-step>
		  	<el-step title="选择配型患者"></el-step>
		</el-steps>
		<div class="msg">
			<i class="el-icon-information icon"></i>
			<div class="text">
				<div class="item">建立候选名单，等待供体检验结果</div>
				<div class="item small">供体检验结果到达后，即可HLA配型；</div>
			</div>
			<el-button type="primary" class="btn" @click="next()">HLA配型</el-button>
		</div>
		<div class="title-wrap">
			<div class="title">
				<div class="item">确认等待配型患者（共18位）</div>
				<div class="item small">联系患者，确认是否可抵达医院候诊</div>
			</div>
			<el-button type="text" class="back-btn" @click="back()">返回新增</el-button>
		</div>
		<el-table
		    :data="tableData"
		    stripe
		    style="width: 100%">
		    <el-table-column min-width="100px"
		    	prop="name" label="患者姓名" align="center">
		    </el-table-column>
		    <el-table-column min-width="175px"
		      	prop="info" label="基本信息" align="center">
		    </el-table-column>
		    <el-table-column min-width="90px"
		      	prop="PRA" label="PRA" align="center">
		    </el-table-column>
		    <el-table-column min-width="95px"
		      	prop="notCheck" label="未查项目" align="center">
		    </el-table-column>
		    <el-table-column min-width="150px"
		      	prop="waitPeriod" label="已登记时间（天）" align="center">
		    </el-table-column>
		    <el-table-column min-width="140px"
		      	prop="telephone" label="联系方式" align="center">
		    </el-table-column>
		    <el-table-column min-width="120px"
		      	prop="address" label="住址" align="center">
		    </el-table-column>
		    <el-table-column min-width="90px" label="操作" align="center">
		      	<template scope="scope">
		      		<el-button type="text" icon="delete" style="width: 20px;padding: 0;"></el-button>
		      	</template>
		    </el-table-column>
		</el-table>
		<div class="pagination-wrap">
			<v-pagination 
				:total='100' 
				:page-size='10' 
				@change='pageChange'
				>				
			</v-pagination>
		</div>
	</div>
</template> 

<style lang='scss' rel='stylesheet/scss' scoped>
	.waitMatch{
		padding: 0 20px;
		.msg{
			background: #fff;
			padding: 15px;
			margin-bottom: 20px;
			.icon{
				line-height: 20px;
				font-size: 40px;
				color: #78A4C5;
			}
			.text{
				display: inline-block;
				margin-left: 10px;
				.item{
					height: 20px;
					line-height: 20px;
				}
				.small{
					font-size: 14px;
				}
			}
			.btn{
				float: right;
			}
		}
		.title-wrap{
			padding: 10px 0;
			.title{
				display: inline-block;
				.item{
					line-height: 20px;
					height: 20px;
					font-size: 14px;
				}
				.small{
					font-size: 12px;
				}
			}
			.back-btn{
				float: right;
			}
		}
	}

</style>

<script>
	import rightHeader from '@/components/rightHeader'
	import pagination from '@/components/pagination'
	export default {
		data() {
			return {
				headerName: '肾源配型',
				transNumber: '000016',
				currentPage: 1,
				tableData:[{
					name:'欧阳',
					info:'女 34岁 161cm 56kg',
					PRA:'阳性',
					notCheck: '2',
					waitPeriod:'156',
					telephone:'15678972346',
					address:'杭州 上城'
				}],
			}
		},
		components: {
			'right-header': rightHeader,
			'v-pagination':pagination
		},
		methods: {
			back(){
				var self = this
				self.$router.push('/kidney/matchList');
			},
			next(){
				var self = this;
				self.$router.push('/kidney/HLAMatch/1');
			},
			pageChange(){
				
			},
		}
	}
</script>
